<template>
  <div>
<h2>门店添加</h2>
  </div>
  <table border="1">
    <tr>
      <td>门店名称</td>
      <td>
        <input type="text" v-model="state.name">
      </td>
    </tr>
    <tr>
      <td>门店位置</td>
      <td>
        <input type="text" v-model="state.address">
      </td>
    </tr>
    <tr>
      <td>门店联系方式</td>
      <td>
        <input type="text" v-model="state.phone">
      </td>
    </tr>
    <tr>
      <td>门店Logo</td>
      <td>
        <input type="file" @change="chang">
       <img :src="src" alt="" width="80" height="80">
      </td>
    </tr>
    <tr>
      <td></td>
      <td>
        <input type="button" value="添加" @click="add">
      </td>
    </tr>
  </table>
</template>

<script setup lang="ts">
import axios from 'axios';
import{reactive,toRefs}from'vue'
import { useRoute,useRouter } from 'vue-router';
let router=useRouter();
let route=useRoute();
let data:any=reactive({
  state:{
  name: '',
  address:'',
  phone: '',
  
  photo: ''
  },
  src:""
})
let{state,src}=toRefs(data)
function add()

{
  let obj={
    "name": state.value.name,
    "address": state.value.address,
  "phone": state.value.phone,
  
  "photo": state.value.photo,
  }
  if(state.value.name=="")
  {
    alert("门店名称不能为空")
    return;
  }
  if(state.value.phone=="")
  {
    alert("门店联系方式不能为空")
    return;
  }
  if(state.value.phone.length<11)
  {
    alert("门店联系方式不正确")
    return;
  }
  if(state.value.address=="")
  {
    alert("门店地址不能为空")
    return;
  }
  if(state.value.address.length<6)
  {
    alert("门店地址必须为6个字符")
    return;
  }
  axios({
    url:'/api/DisCount/StoreAdd',
    method:'post',
    data:obj
  })
  .then(res=>{
   if(res.data.data==1)
   {
    alert("添加成功")
    router.push("../show")
   }
   else if(res.data.data==-1)
   {
    alert("门店名称不能重复")
    return;
   }
  })
  .catch(err=>{

  })
}
function chang()
{
  alert("上传成功")
}
</script>

<style scoped>

</style>